<template>
    <view class="form-box">
        <view class="top-tip-wrapper" v-show="qrcode.id">
            <u-icon name="info-circle-fill"></u-icon>
            <text>当前入职仅供{{ qrcode.targetDesc }}签署使用</text>
        </view>

        <u-form :model="form" ref="uForm">
            <u-form-item label="手机号码" label-width="180" prop="mobile" required>
                <u-input v-model="form.mobile" maxlength="11" placeholder="请输入手机号码" />
            </u-form-item>

            <u-form-item prop="verifyCode">
                <u-input v-model="form.verifyCode" maxlength="6" placeholder="请输入手机验证码" />
                <u-toast ref="uToast"></u-toast>
                <u-verification-code :seconds="seconds" ref="uCode" @change="codeChange"
                    start-text="获取验证码"></u-verification-code>
                <view style="color: #5FC484;" @tap="getCode">{{ tips }}</view>
            </u-form-item>
            <!-- <u-form-item v-if="showZhandian" label="站点/大仓" label-width="180" prop="site" required>
                <u-input type="select" v-model="form.site" :placeholder="'请选择站点/大仓'"
                    @click="showPickerMax($event)"></u-input>
            </u-form-item> -->
        </u-form>
        <u-button type="primary" shape="square" :ripple="true" size="default" @click="submit" class="custom-btn"
            :throttle-time="5000">确定
        </u-button>
        <u-modal v-model="showModel" content="确认绑定？" @confirm="submitData" @cancel="cancel" show-cancel-button></u-modal>
        <nui-picker ref="picker" :title="auiPicker.title" :layer="auiPicker.layer" :data="auiPicker.data"
            @callback="pickerCallback"></nui-picker>
        <view class="tips-wrapper" v-show="showTip">
            <p class="title">河南秒安达网络科技有限公司</p>
            <p class="tip">秒安达从事外卖递送服务，骑手入职，需要签订送外卖的协议，秒安达会通过短信发送入职协议签订的链接，方便骑手通过短信即可直接打开小程序完成协议相关信息的签订流程，提高入职流程效率。</p>
        </view>

    </view>
</template>

<script>
import store from "@/store";
import { mapGetters } from "vuex";
import nuiPicker from "@/components/picker.vue";
import AuthInfo from "@/utils/authInfo.js";
export default {
    data() {
        return {
            qrcode: {},
            form: {
                mobile: "",
                verifyCode: "",
                site: ""
            },
            code: '',
            tips: '',
            seconds: 60,
            showModel: false,
            rules: {
                mobile: [
                    {
                        required: true,
                        message: "请输入手机号",
                        trigger: ["change", "blur"],
                    },
                    {
                        validator: (rule, value, callback) => {
                            return this.$u.test.mobile(value);
                        },
                        message: "手机号码不正确",
                        trigger: ["change", "blur"],
                    }
                ],
                verifyCode: [
                    {
                        required: true,
                        message: "请输入验证码",
                        trigger: "change",
                    },
                ],
                site: [
                    {
                        required: true,
                        message: "请选择站点",
                        trigger: ["change", "blur"],
                    },
                ],
               
            },
            showTip: false,
            auiPicker: {
                title: "选择站点",
                layer: null,
                data: [],
            },
            showSite: true,
            siteItem: '',
            showZhandian: true
        }
    },
    components: {
        nuiPicker,
    },
    onLoad(option) {
        // 等于null，等于121，显示选择站点
        // this.deptId = option.deptId;
        // this.code = option.code;
        // AuthInfo.toLogin(getQueryString("code"),121)
        // if(option.deptId == '121' || (!getQueryString("code"))){
        // this.showZhandian = true;
        // this.rules.site[2].required = true;
        // }
    },
    mounted() {
        // this.getDeptList();
    },
    methods: {
        async getDeptList(){
            let deptId = "0";
            let res = await this.$api.dept.listDept({ deptId });
            this.auiPicker.data = res.data;
        },
        //显示picker多级联动弹窗
        showPickerMax(e) {
            this.auiPicker.layer = null;
            this.$refs.picker.open();
        },
        //picker多级联动回调
        pickerCallback(e) {
            // let result = "";
            // e.data.forEach(function (item, index) {
            //   result += item.label + "   ";
            // });
            let data = e.data;
            this.siteItem = data[data.length - 1];
            this.form.site = this.siteItem.label;
        },
        codeChange(text) {
            this.tips = text;
        },
        cancel() {
            this.showModel = false;
        },
        submitData() {
            this.submitRegister();
        },
        submit() {
            // store.commit("UPDATE_ROUTEURL", "/pages/loanGuarantee/wodeList?type=yanzheng");
            this.$refs.uForm.validate((valid) => {
                if (valid) {
                    this.showModel = true;
                } else {
                    ui.showModal({
                        title: "提示",
                        content: "验证失败",
                    });
                }
            });
        },

        async submitRegister() {
            if (this.form.verifyCode != null || this.form.verifyCode != "") {
                let { code, msg } = await this.$api.notoken.verifyPhoneCode(this.form);
                if (msg != null && code === 200) {
                    this.$u.toast('验证成功');
                    let data = {
                        phone : this.form.mobile,
                        openid: uni.getStorageSync("openidd")
                    }
                    let res = await this.$api.jiekuan.getSetOpenid(data);
                    if(res.code == 200){
                        uni.setStorageSync("jiekuanMobile", this.form.mobile);
                        setTimeout(() => {
                            store.commit("UPDATE_ROUTEURL", "/pages/loanGuarantee/wodeList?type=yanzheng");
                        }, 500);
                    }
                } else {
                    this.$u.toast('验证失败');
                }
            } else {
                this.$u.toast('验证码为空');
            }
        },
        async getCode() {
            // uni.setStorageSync("token", "");
            if (!this.$u.test.mobile(this.form.mobile)) {
                this.$u.toast('请输入正确的手机号');
            } else {
                console.log(this.form);
                if (this.$refs.uCode.canGetCode) {
                    // 向后端请求验证码
                    let { code, msg } = await this.$api.notoken.phoneCode(this.form);
                    if (code == 200) {
                        uni.hideLoading();
                        // 这里此提示会被this.start()方法中的提示覆盖
                        this.$u.toast('验证码已发送');
                        // 通知验证码组件内部开始倒计时
                        this.$refs.uCode.start();
                    } else {
                        this.$u.fail('发送失败，请重试')
                    }
                } else {
                    this.$u.toast('倒计时结束后再发送');
                }
            }
        },
        // 查询当前提示
        async getCustomCode() {
            if (!this.qrCodeId) {
                return
            }
            const res = await this.$api.inductionCode.getCode(this.qrCodeId)
            if (res && res.code === 200) {
                this.qrcode = res.data
                if (this.qrcode && this.qrcode.deleted === true) {
                    store.commit("UPDATE_ROUTEURL", "/pages/disable/index");
                }
            }
        },
        end() {
            this.$u.toast('倒计时结束');
        },
        start() {
            this.$u.toast('倒计时开始');
        },
        // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
        onReady() {
            this.$refs.uForm.setRules(this.rules);
            // 判断是否在微信小程序中打开
            if (window.__wxjs_environment === 'miniprogram') {
                this.showTip = true
            }
            // 查询当前二维码
            this.getCustomCode()
        }
    },
    computed: {
        ...mapGetters(['qrCodeType', 'qrCodeId']),
    }
};
</script>

<style lang="scss" scoped>
.top-tip-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 24px;
    color: white;
    font-weight: 600;
    font-size: 13px;
    background-color: #2979FF;
}

.form-box {
    box-sizing: border-box;
    padding: 20px;
}

.custom-btn {
    margin: 15px auto;
    left: 50%;
    transform: translateX(-50%);
}

.tips-wrapper {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: fixed;
    bottom: 32px;

    .title {
        font-weight: bold;
        font-size: 14px;
    }

    .tip {
        margin-top: 6px;
        font-size: 12px;
    }

}
</style>
